<template>
	<view class="comp-photo-info">
		<view class="photo-wrap">
			<view class="photo-box" :class="imageUrlAttr === 'typesetUrl'? 'typesetUrl' : 'photoUrl'">
				<image @click="onPreview" :src="detailInfo[imageUrlAttr]" mode="aspectFit"></image>
			</view>
		</view>
		<u-gap height="16" bgColor="#fff"></u-gap>
		<view>
			<text class="photo-name">名称：{{ detailInfo.name }}{{ detailInfo.custom ? '照' : '' }}</text>
		</view>
		<u-gap height="16" bgColor="#fff"></u-gap>
		<view class="photo-detail flex-between-center">
			<view class="item border-right">
				<text class="normal-title">图片尺寸
				</text>
				<text class="desc mt-4">{{ detailInfo.widthPixel }}*{{ detailInfo.heightPixel }}px</text>
			</view>
			<view class="item border-right pl-20">
				<text class="normal-title">图片大小
				</text>
				<text class="desc mt-4">{{ detailInfo.minSize }}-{{ detailInfo.maxSize }}KB</text>
			</view>
			<view class="item pl-20">
				<text class="normal-title">分辨率
				</text>
				<text class="desc mt-4">{{ detailInfo.dpi }}DPI</text>
			</view>
		</view>
	</view>
	<image-preview v-model:show="showPreview" :src="detailInfo[imageUrlAttr]" :imageStyle="photoImageStyle" :isRotate="imageUrlAttr === 'typesetUrl'"/>
</template>


<script setup>
	import imagePreview from '@/components/image-preview/index';
	import {
		ref,
		reactive,
		computed,
	} from "vue";
	import {
		getImgScaleStyle,
	} from '@/common/js/method';

	const props = defineProps({
		detailInfo: {
			type: Object,
			default: () => ({}),
		},
		imageUrlAttr: { //指定图片的属性名
			type: String,
			default: '',
		},
	});
	const showPreview = ref(false);
	const onPreview = () => {
		showPreview.value = true;
	}
	// 缩放图片
	// 排版照宽高互换，且旋转90度
	const photoImageStyle = computed(() => {
		const width = props.detailInfo[props.imageUrlAttr === 'typesetUrl' ? 'heightPixel' : 'widthPixel'];
		const height = props.detailInfo[props.imageUrlAttr === 'typesetUrl' ? 'widthPixel' : 'heightPixel'];
		return {
			...getImgScaleStyle(width, height, 350),
		};
	});
	console.log('photoImageStyle', photoImageStyle)
</script>

<style lang="scss" scoped>
	.comp-photo-info {
		box-sizing: border-box;
		// height: 458rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);
		padding: 32rpx;

		.photo-wrap {
			// height: 200rpx;
			box-sizing: border-box;
			background: rgba(245, 245, 245, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 12rpx 0;
			height: 260rpx;

			.photo-box {

				// 排版照
				&.typesetUrl {
					width: 236rpx;
					height: 176rpx;
					transform: rotate(90deg);

					image {
						width: 236rpx;
						height: 176rpx;
					}

				}

				// 单张照
				&.photoUrl {
					width: 176rpx;
					height: 236rpx;

					image {
						width: 176rpx;
						height: 236rpx;
					}
				}

			}
		}

		.photo-name {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 48rpx;
			color: rgba(56, 56, 56, 1);
		}

		.photo-detail {
			display: flex;

			.item {
				display: flex;
				flex-direction: column;
				// align-items: center;
				flex: 1;
			}

			.border-right {
				border-right: 2rpx solid rgba(245, 245, 245, 1);
			}

			.pl-20 {
				padding-left: 40rpx;
			}

			.photo-item-desc {
				margin-top: 7rpx;
			}
		}
	}
</style>